<template>
  <div class="content">
    <a-space class="space" direction="vertical" fill>
      <a-button type="primary" @click="generateBarCode">生成条码</a-button>
      <TableTurn
        :is-show-pagination="false"
        :table-data="getData"
        ref="tableRef"
      >
        <a-table-column :width="80" align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column
          v-for="item in selectedHeader"
          :title="item.name"
          :data-index="item.code"
          :key="item.code"
          :width="200"
        >
        </a-table-column>
        <a-table-column :width="200" align="center">
          <template #title> 操作 </template>
          <template #cell="{ record }">
            <a-button type="text" @click="getQrcodeList(record.barcodes)"
              >查看条码</a-button
            >
          </template>
        </a-table-column>
      </TableTurn>
    </a-space>
    <barCode
      v-model:visible="modelVisible"
      :orderInfo="orderInfo"
      @addBarcode="addBarcode"
    ></barCode>
    <QrcodeTable
      v-if="modelTable"
      v-model:visible="modelTable"
      :data="barcodesData"
    ></QrcodeTable>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { getSinglePurchaseOrder } from '@/api/buy-management/buy-order/index';
  import { cloneDeep } from 'lodash';
  import barCode from './bar-code.vue';
  import QrcodeTable from './components/qrcode.vue';

  const route = useRoute();
  const id = Number(route.query.id);
  const tableRef = ref();
  const modelVisible = ref(false);
  const modelTable = ref(false);
  const barcodesData = ref();
  const orderInfo = ref();
  // 获取对应列表信息
  const getData = async () => {
    try {
      const res: any = await getSinglePurchaseOrder({
        id,
      });
      orderInfo.value = res;
      return Promise.resolve(res.product);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  const router = useRouter();
  const back = () => {
    // warning： Go to the node that has the permission
    router.push({ name: 'Workplace' });
  };

  const columns = [
    {
      name: '物料编码',
      code: 'number',
      isDefault: 1,
    },
    {
      name: '物料名称',
      code: 'name',
      isDefault: 1,
    },
    {
      name: '规格型号',
      code: 'spec',
      isDefault: 1,
    },
    {
      name: '采购单位',
      code: 'basicName',
      isDefault: 1,
    },
    {
      name: '物料指导单价',
      code: 'guidePrice',
      isDefault: 1,
    },
    {
      name: '需求数量',
      code: 'amount',
      isDefault: 1,
    },
    {
      name: '折扣',
      code: 'discount',
      isDefault: 1,
    },
    {
      name: '已使用数量',
      code: 'barcodeAmount',
      isDefault: 1,
    },
    {
      name: '可使用数量',
      code: 'barcodingAmount',
      isDefault: 1,
    },
    {
      name: '总金额',
      code: 'totalPrice',
      isDefault: 1,
    },
  ];
  // 在表格上显示的表头
  const selectedHeader = computed(() => {
    const arr: any = [];
    columns.forEach((item) => {
      if (item.isDefault === 1) {
        arr.push(item);
      }
    });
    return arr;
  });

  const generateBarCode = () => {
    modelVisible.value = true;
  };

  const getQrcodeList = (val: number) => {
    modelTable.value = true;
    barcodesData.value = val || [];
  };

  const addBarcode = (val: any) => {
    if (val) tableRef.value.loadData();
  };
</script>

<style scoped lang="less">
  .space {
    padding: 20px;
  }
</style>
